<template>
  <view id="wrap">
    <c-navBar
      :title="type == 1 ? '用户协议' : type == 2 ? '隐私协议' : '合同协议'"
      isSeat
    ></c-navBar>
    <view class="main">
      <view class="content">
        <view class="content_title" v-if="type == 3">
          请您点击每个合同文件认真阅读全文，确保充分知悉和理解其所有内容。若无疑义，请点击下方"签名签署"按钮完成电子签名。
        </view>
        <view class="lookBtn" v-if="type == 3" @click="goLookContract">
          <text>茶园合同</text>
          <p>
            点击查看
            <image src="@/static/common/go2.png" mode="widthFix"></image>
          </p>
        </view>
      </view>
      <view class="foot" v-if="type == 3" @click="goSign"> 合同签署 </view>
    </view>
    <view v-if="type == 3">
      <c-imgTipsPopOne
        :show="receiveShow"
        :img="popImg"
        text="请前去支付完成认养"
        title="签署成功"
        @close="closeReceive"
      ></c-imgTipsPopOne>
      <view>
        <u-popup
          :show="show"
          mode="center"
          round="30"
          :mask-close-able="false"
          :safeAreaInsetBottom="false"
        >
          <view class="sign-box">
            <view style="text-align: right" @click="this.show = false">
              <image
                style="width: 28rpx"
                src="../../static/tabbar/canlcne-icon.png"
                mode="widthFix"
              >
              </image>
            </view>
            <p class="p-1">选择支付方式</p>
            <view class="box1">
              <view class="box1-one" @click="changeWay(1)">
                <view class="">
                  <image
                    style="width: 32rpx"
                    src="../../static/tabbar/weixin-icon.png"
                    mode="widthFix"
                  ></image>
                  <text style="margin-left: 8rpx">微信支付</text>
                </view>
                <image
                  style="width: 28rpx"
                  :src="
                    way == 1
                      ? '../../static/tabbar/circle-icon1.png'
                      : '../../static/tabbar/circle-icon2.png'
                  "
                  mode="widthFix"
                >
                </image>
              </view>
              <view class="box1-one" @click="changeWay(2)">
                <view class="">
                  <image
                    style="width: 32rpx"
                    src="../../static/tabbar/xianxia-icon.png"
                    mode="widthFix"
                  ></image>
                  <text style="margin-left: 8rpx">线下支付</text>
                </view>
                <image
                  style="width: 28rpx"
                  :src="
                    way == 2
                      ? '../../static/tabbar/circle-icon1.png'
                      : '../../static/tabbar/circle-icon2.png'
                  "
                  mode="widthFix"
                >
                </image>
              </view>
            </view>

            <view class="determine" @click="determineFn">确认</view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "", //类型
      receiveShow: false,
      show: false,
      way: 1, //支付方式
      urlPdf: "", //合同地址
      popImg: require("../../static/tabbar/gou.png"),
      num: "", //亩数
      code: "", //邀请码
      memberType: "", //会员类型
      userAgreement: "", //用户协议
      getAgreement: "", //隐私协议
      phoneType: "android",
      pdf: "",
      lookType: false,
    };
  },
  onShow() {
    this.completeSigin();
  },

  methods: {
    openPdf(url) {
      uni.downloadFile({
        url: url,
        success: function (res) {
          console.log(res, "res");
          let filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              // console.log(res, "打开文档成功");
              // uni.hideLoading()
            },
          });
        },
        fail(err) {
          console.log("打开文档失败", err);
        },
      });
    },

    agreement() {
      if (this.type == 1) {
        this.$api.userAgreement({}).then((res) => {
          console.log(res, "用户协议");
          this.userAgreement = res.data;
          this.openPdf(res.data);
        });
      } else if (this.type == 2) {
        this.$api.getAgreement({}).then((res) => {
          console.log(res, "隐私协议");
          this.getAgreement = res.data;
          this.openPdf(res.data);
        });
      } else {
      }
    },

    // 查看合同
    goLookContract() {
      this.openPdf(this.urlPdf);
      this.lookType = true;
    },
    // 合同签署
    goSign() {
      uni.showLoading({
        title: "",
        mask: true,
      });
      if (this.lookType) {
        uni.navigateTo({
          url: "/pages/my/pages/signature?urlPdf=" + this.urlPdf,
        });
        uni.hideLoading();
      } else {
        uni.hideLoading();
        uni.showToast({
          icon: "none",
          title: "请先查看合同",
        });
      }
    },
    // 是否完成签署
    completeSigin() {
      if (uni.getStorageSync("signType") == 1) {
        this.receiveShow = true;
        uni.removeStorageSync("signType");
      }
      let pdf = uni.getStorageSync("pdf");
      if (pdf) {
        this.pdf = pdf;
        uni.removeStorageSync("pdf");
      }
    },
    // 去支付
    closeReceive() {
      this.show = true;
      this.receiveShow = false;
    },
    // 选择支付方式
    changeWay(way) {
      this.way = way;
      console.log(this.way, "方式");
    },
    // 支付
    determineFn() {
      // console.log(id);
      // 线上支付
      if (this.way == 1) {
        this.$api
          .payManor({
            code: this.code,
            contractUrl: this.pdf,
            num: this.num,
            payType: this.way,
            type: this.memberType,
          })
          .then((res) => {
            console.log(res, "线上支付");
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: res.data.paySignVO.timeStamp,
              nonceStr: res.data.paySignVO.nonceStr,
              package: res.data.paySignVO.package,
              signType: res.data.paySignVO.signType,
              paySign: res.data.paySignVO.paySign,
              success: (v) => {
                console.log(v, "支付信息");

                uni.showToast({
                  title: "支付成功",
                  icon: "success",
                  duration: 1000,
                });

                setTimeout(() => {
                  this.show = false;
                  this.receiveShow = false;
                  uni.reLaunch({
                    url: "/pages/my/pages/recordBuy",
                  });
                }, 1000);

                // this.list[index].status = 2
                // uni.redirectTo({
                // 	url: '/pages/meetting/pages/order'
                // })
              },
              fail: (err) => {
                console.log(err, "支付失败");

                uni.showToast({
                  title: "支付失败",
                  duration: 1000,
                  icon: "error",
                });
                setTimeout(() => {
                  this.show = false;
                  this.receiveShow = false;
                }, 1000);
              },
              complete: (v) => {
                // console.log(v, 'xx')
              },
            });
          });
      } else {
        uni.navigateTo({
          url: `/pages/my/pages/proveUpload?urlPdf=${this.pdf}&&type=3&&num=${this.num}&&code=${this.code}&&memberType=${this.memberType}`,
        });
      }
    },
  },
  onLoad(options) {
    console.log(options, "类型");
    this.type = options.type;
    this.urlPdf = options.urlPdf;
    this.num = options.num;
    this.code = options.code;
    this.memberType = options.memberType;
    this.agreement();
  },
};
</script>

<style lang="scss" scoped>
#wrap {
  width: 100vw;
  height: 100vh;
  padding-top: 170rpx;
  box-sizing: border-box;
}

.main {
  padding: 30rpx;
  box-sizing: border-box;
  width: 750rpx;
  height: calc(100vh - 200rpx);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content {
    // width: 100%;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    // text-align: center;

    .content_title {
      font-size: 28rpx;
      color: #2ad03d;
    }

    .lookBtn {
      margin: 30rpx 0 0;
      padding: 0rpx 20rpx;
      box-sizing: border-box;
      width: 100%;
      height: 96rpx;
      background: #f7f7f7;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      text {
        color: #333;
        font-size: 30rpx;
      }

      p {
        color: #999;
        font-size: 26rpx;

        image {
          width: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .foot {
    width: 686rpx;
    height: 96rpx;
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.sign-box {
  padding: 40rpx 30rpx 24rpx;
  // text-align: center;
  width: 560rpx;

  .p-1 {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
  }

  .box1 {
    // height: 100rpx;
    width: 400rpx;
    margin: 0 auto;

    .box1-one {
      height: 90rpx;
      width: 100%;
      border-bottom: 1rpx solid #e6e6e6;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .time {
    color: #5c5e66;
    font-size: 24rpx;
    margin-top: 54rpx;
  }

  .determine {
    width: 400rpx;
    height: 72rpx;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 62rpx;
  }
}
</style>
